<template>
  <div class="bar-topic">
    <div class="index-content-bar">
          <el-link :underline="false" @click="postVideo()" style="margin-left: 25px;margin-top: 15px">点我发布视频</el-link>
          <el-divider />
          <div style="margin: 4%;">
            <div v-for="item in videoData" style="display: inline-block;">
              <div style="margin-left: 20px;margin-bottom: 10px">
                <div>
                  <el-avatar :size="35" :src="item.users.usersPortrait" style="display: inline-block"/>
                  <div style="display: inline-block;margin-left: 3px">
                    {{ item.users.usersName }}
                    <div style="font-size: 10px;color:#475669;margin-bottom: 10px;">
                      <div class="el-icon-collection" style="display: inline-block">
                        {{ item.community.communityName }}
                      </div>
                      <div class="el-icon-timer" style="display: inline-block">
                        <TimeDisposal :date="item.videoCreatingTime" style="font-size: 10px;color:#475669;"/>
                      </div>
                    </div>
                  </div>
                  <div class="videoTitleDiv">{{ item.videoTitle }}</div>
                </div>
                <video :src="item.videoSrc" @click="videoPlayer(item.videoId)" :poster="item.videoPoster" style="width: 100%;height: 90%" disablePictureInPicture/>
                <el-divider></el-divider>
              </div>
            </div>
          </div>
    </div>
  </div>
</template>

<script>
import request from "../../../utils/request";
import TimeDisposal from "../../../components/timeDisposal";
import {gotoNewWindow} from "../../../utils/sameMethod";
export default {
  components:{TimeDisposal},
  name: "recommendVideo",
  data(){
    return{
      videoData:[],
      index:0,
      getVideoState:true
    }
  },
  methods:{
    postVideo(){
      this.$router.push('/postVideo')
    },
    initVideo(){
      request.get('/article/getVideo/'+this.index).then((res =>{
        this.videoData=this.videoData.concat(res.data);
        if (res.data.length < 2){
          this.getVideoState=false
        }
      }))
    },
    handleScroll() {
      let top = Math.floor(window.pageYOffset)
      let totalLength=document.documentElement.scrollHeight * 0.20
      if (top >= totalLength && this.getVideoState === true){
        this.getVideoState=false;
        this.index=this.index+2;
        this.initVideo()
        this.getVideoState=true;
      }
    },
    videoPlayer(videoId){
      gotoNewWindow(videoId,"content","videoPlay");
    },
  },
  mounted() {
    document.title="视频 - 贴乎";
    this.initVideo();
    window.addEventListener('scroll', this.handleScroll, true);
  }
}
</script>

<style scoped>
.videoTitleDiv{
  font-weight: bolder;
  margin-bottom: 10px;
  width: 230px;
  display: -webkit-box;
  display: -moz-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:1;
}
.bar-topic{
  float: left;
  width: 69%;
}
.index-content-bar{
  height: 100%;
  margin-top: 10px;
  box-shadow: 0 2px 59px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
</style>